// @import url('@/assets/styles/screen.scss');
$screen-sm-min: 750px;
.header {
  padding: 16px;
  .card {
    padding: 16px 16px;
    .content {
      width: 100%;
      display: table;
      overflow-x: scroll;
      &::after {
        clear: both;
      }
      .map-img {
        width: 100%;
        height: calc(100vw - 250px);
        float: none;
        @media screen and (min-width: $screen-sm-min) {
          width: 400px;
          height: 200px;
          float: left;
        }
        display: block;
      }
      .right {
        width: 100%;
        min-width: 0px;
        display: block;
        float: left;
        margin-left: 0px;
        margin-top: 16px;
        text-align: center;
        @media screen and (min-width: $screen-sm-min) {
          width: auto;
          min-width: 300px;
          display: flex;
          float: none;
          margin-left: 400px + 16px;
          margin-top: 0px;
          text-align: left;
        }
        word-wrap: break-word;
        align-items: center;
        flex-wrap: wrap;
        height: 200px;
        flex: 1;
        .des {
          overflow-y: auto;
          max-height: 113px;
          min-height: 20px;
          width: 100%;
          &::-webkit-scrollbar {
            display: none;
          }
        }
        .get-id {
          width: 100%;
        }
      }
    }
  }
}
.daily {
  border-radius: 4px;
  overflow: hidden;
  margin: 0px 16px;
  background-color: #fff;
  box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
  .table-wrapper {
    margin: 0px 16px 16px 16px;
    overflow-x: auto;
    overflow-y: hidden;
    .table {
      // padding: 0px 16px;
      // width: 100%;
      text-align: center;
      margin-bottom: 0px;
      th {
        text-align: center;
      }
      .map-img {
        width: 200px;
        img {
          max-width: 200px;
        }
      }
    }
  }
}

input.map-id {
  &::content {
    text-align: center;
  }
}
.fix-panel {
  display: block;
  width: 40px;
  height: 40px;
  // background-color: red;
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 9999;
  // transition-duration: 2s;
  // animation-delay: 2s;
  transition: all 0.5s linear 2s;
  // transition-delay: 2s;

  &:hover {
    // right: 25px;
    // transition: all .1s linear 0s;
    // animation-name: going;
    // animation-duration: .5s;
    // animation-delay: 0s;
    // animation-fill-mode: forwards;
    // animation: delay-2s 3s 1 forwards;
    // animation-delay: 2s;
    // transition-duration: 2s;
  }
  @keyframes going {
    0% {
      right: -20px;
    }
    100% {
      right: 25px;
    }
  }
}
.example-container {
  width: 100%;
  height: 100%;
}
.example-sidenav-content {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.example-sidenav {
  padding: 20px;
}
// fix
.mat-card > .mat-card-actions:last-child {
  margin-bottom: 0px;
}
:host ::ng-deep .mat-tab-header {
  margin: 0px 16px;
}
:host ::ng-deep .mat-card-header-text {
  margin: 0px 0px;
}
:host ::ng-deep .mat-form-field-wrapper {
  // padding-bottom: 0px;
}
